/*
 * @Author: Await
 * @Date: 2025-04-17 16:50:30
 * @LastEditors: Await
 * @LastEditTime: 2025-05-07 09:52:24
 * @Description: 系列配置组件 (直接使用props.series进行预设应用)
 */
import React, { useState, useCallback, useEffect } from 'react';
import { useLocalStorage } from '../../../hooks/useLocalStorage';
import { useSeriesPresets } from '../../../hooks/useSeriesPresets';
import {
    Form,
    Input,
    Switch,
    Select,
    Divider,
    Row,
    Col,
    Typography,
    Tabs,
    Button,
    InputNumber,
    Space,
    Card,
    Tooltip,
    ColorPicker,
    Slider,
    Collapse,
    Popover,
    Modal,
    message
} from 'antd';
import {
    PlusOutlined,
    DeleteOutlined,
    InfoCircleOutlined,
    SettingOutlined,
    AppstoreOutlined,
    DotChartOutlined,
    AimOutlined,
    BgColorsOutlined,
    SlackOutlined,
    SaveOutlined,
    ImportOutlined
} from '@ant-design/icons';

import { SeriesItem, ChartType } from '../../../types';
import MarkPointConfig from '../../Controls/MarkPointConfig';
import MarkLineConfig from '../../Controls/MarkLineConfig';
import MarkAreaConfig from '../../Controls/MarkAreaConfig';
import SeriesTooltipConfig from '../../Controls/SeriesTooltipConfig';

interface SeriesConfigProps {
    series?: SeriesItem[]; // series prop from parent
    chartType: ChartType;
    onChange: (series: SeriesItem[]) => void;
}

// 辅助类型：安全访问对象属性
type SafeRecord<T> = T & Record<string, unknown>;

// 定义颜色值的类型
type ColorValue = string | {
    toHexString: () => string;
    [key: string]: any;
};

// 扩展ECharts配置项接口来解决类型错误
interface ExtendedLabelConfig {
    show?: boolean;
    position?: string;
    formatter?: string;
    fontSize?: number;
    color?: string;
    backgroundColor?: string | object;
    // 添加缺失的属性
    rotate?: number;
    padding?: number | number[];
    borderRadius?: number;
    [key: string]: any; // 允许其他属性
}

interface ExtendedItemStyleConfig {
    color?: string;
    opacity?: number;
    borderWidth?: number;
    borderColor?: string;
    borderRadius?: number | number[];
    // 添加缺失的属性
    borderType?: string;
    shadowBlur?: number;
    shadowColor?: string;
    shadowOffsetX?: number;
    shadowOffsetY?: number;
    [key: string]: any; // 允许其他属性
}

interface ExtendedEmphasisConfig {
    focus?: 'none' | 'self' | 'series';
    scale?: boolean | number;
    // 添加缺失的属性
    disabled?: boolean;
    itemStyle?: ExtendedItemStyleConfig;
    label?: ExtendedLabelConfig;
    [key: string]: any;
}

/**
 * 系列配置组件
 */
const SeriesConfig: React.FC<SeriesConfigProps> = ({ series, chartType, onChange }) => {
    const [activeTab, setActiveTab] = useState('0');
    const [expandedSections, setExpandedSections] = useState<string[]>(['basic']);
    const [showPresetModal, setShowPresetModal] = useState(false);
    const [presetName, setPresetName] = useState('');
    const [lastAppliedPreset, setLastAppliedPreset] = useLocalStorage<string>(`last-applied-series-preset-${chartType.toLowerCase()}`, '');

    // 使用系列预设钩子
    const { allPresets, saveAsPreset, deletePreset } = useSeriesPresets(chartType);

    // 默认配置
    const defaultSeriesConfig: SeriesItem = {
        name: '',
        type: chartType?.toLowerCase() as any || 'line', // 添加默认值以防chartType为undefined
        data: [],
        color: '#5470c6',
        emphasis: {
            focus: 'series' as const
        }
    };

    // 内部状态 seriesConfig，主要用于驱动 UI（如 Tabs, 表单控件的显示值）
    // 它会被 props.series 的变化间接更新 (通过 useEffect)
    const [seriesConfig, setSeriesConfig] = useState<SeriesItem[]>(
        series && series.length > 0 ? series : [defaultSeriesConfig]
    );

    // 监听 props.series 变化，更新内部 UI 状态 seriesConfig
    // 这确保了当父组件数据变化时，UI能反映出来 (例如 Tab 标签名)
    useEffect(() => {
        if (series && series.length > 0) {
            // 简单检查长度是否一致，避免不必要的深比较和更新
            // 注意：这里仅用于更新UI状态，预设应用不依赖这个内部状态
            if (series.length !== seriesConfig.length || JSON.stringify(series) !== JSON.stringify(seriesConfig)) {
                console.log('【SeriesConfig】检测到 props.series 变化，更新内部 UI 状态 seriesConfig', series);

                // 确保所有系列都有有效的类型值
                const updatedSeries = series.map(item => ({
                    ...item,
                    type: item.type || chartType?.toLowerCase() || 'line'
                }));

                setSeriesConfig(updatedSeries as SeriesItem[]); // 使用类型断言
                // 如果 activeTab 超出新的 series 范围，重置为 '0'
                const currentActiveIndex = parseInt(activeTab, 10);
                if (isNaN(currentActiveIndex) || currentActiveIndex >= updatedSeries.length) {
                    setActiveTab('0');
                }
            }
        } else if (seriesConfig.length > 0) {
            console.log('【SeriesConfig】检测到 props.series 变为空，重置内部 UI 状态 seriesConfig');
            setSeriesConfig([defaultSeriesConfig]);
            setActiveTab('0');
        }
        // 让 linter 满意，但主要依赖 series
    }, [series, activeTab, seriesConfig.length, chartType]);

    // 应用预设 - 直接使用 props.series 作为原始数据来源
    const applyPreset = useCallback((presetConfig: SeriesItem) => {
        const currentSeriesIndex = parseInt(activeTab, 10);
        if (isNaN(currentSeriesIndex)) {
            message.error('无效的系列标签索引');
            return;
        }

        console.log('应用预设 - 预设配置:', presetConfig);
        console.log('应用预设 - 当前系列索引:', currentSeriesIndex);

        // === 直接从 Props 读取原始配置 ===
        if (!series || currentSeriesIndex < 0 || currentSeriesIndex >= series.length) {
            message.error('无法从父组件获取有效的原始系列配置');
            console.error('【SeriesConfig】applyPreset: 无法从 props.series 获取索引为 ' + currentSeriesIndex + ' 的配置', series);
            return;
        }
        const originalConfigFromProps = series[currentSeriesIndex]; // 直接使用 props.series
        // ==================================

        // !!! 关键日志：检查 props 中的 data 是否存在
        console.log('应用预设 - 原始配置 (来自 Props, 合并前):', JSON.stringify(originalConfigFromProps));
        console.log('应用预设 - 原始 data (来自 Props, 合并前):', JSON.stringify(originalConfigFromProps?.data));

        // 创建一个干净的预设副本，只包含需要应用的样式等属性
        const stylesToApply: Partial<SafeRecord<SeriesItem>> = { ...presetConfig as SafeRecord<SeriesItem> };
        delete stylesToApply.name; // 不覆盖 name
        delete stylesToApply.type; // 不覆盖 type
        delete stylesToApply.data; // 不覆盖 data
        delete stylesToApply.id;  // 不覆盖 id

        console.log('应用预设 - 要应用的样式:', stylesToApply);

        // 执行合并：从原始配置 (来自Props) 开始，然后覆盖预设中的样式
        const mergedConfig: SafeRecord<SeriesItem> = {
            ...originalConfigFromProps as SafeRecord<SeriesItem>, // 包含原始 data (来自Props)
            ...stylesToApply,           // 覆盖样式
        };

        // !!! 关键步骤：再次强制确保 data 来自原始配置 (来自 Props)
        // 这一步理论上因为 ...originalConfigFromProps 已经包含了 data，
        // 但为了绝对保险，再次赋值。
        if (originalConfigFromProps.data !== undefined) {
            mergedConfig.data = originalConfigFromProps.data;
        } else {
            console.warn("【SeriesConfig】applyPreset: 原始配置 (来自Props) 中 data 为 undefined!");
            // mergedConfig.data 已经是 undefined，无需操作，但发出警告
        }

        // 解决样式混合问题 - 确保某些属性在应用新预设时被清理
        // 这些是容易导致样式冲突的属性
        if (!stylesToApply.areaStyle && mergedConfig.areaStyle) {
            mergedConfig.areaStyle = undefined;
        }

        if (!stylesToApply.lineStyle && mergedConfig.lineStyle) {
            mergedConfig.lineStyle = undefined;
        }

        if (!stylesToApply.itemStyle && mergedConfig.itemStyle) {
            mergedConfig.itemStyle = undefined;
        }

        // !!! 关键日志：检查合并后的 data 是否存在
        console.log('应用预设 - 更新后的系列配置 (合并后):', JSON.stringify(mergedConfig));
        console.log('应用预设 - 更新后配置中的 data (合并后):', JSON.stringify(mergedConfig?.data));

        // 创建新的完整 series 数组，用合并后的配置替换掉目标索引的系列
        const newCompleteSeries = (series || []).map((s, index) =>
            index === currentSeriesIndex ? mergedConfig as SeriesItem : s
        );

        console.log('应用预设 - 触发 onChange 的完整系列数组:', newCompleteSeries);

        onChange(newCompleteSeries); // 将合并后的完整配置传递给父组件
        message.success(`已应用预设 "${presetConfig.name}" 到 "${mergedConfig.name || `系列 ${currentSeriesIndex + 1}`}"`);
        setLastAppliedPreset(presetConfig.name || '');

    }, [activeTab, series, onChange, setLastAppliedPreset]); // 依赖项改为 props.series

    // 保存当前系列配置为预设 - 需要读取 props.series
    const handleSavePreset = useCallback(() => {
        if (!presetName.trim()) {
            message.error('请输入预设名称');
            return;
        }
        const currentSeriesIndex = parseInt(activeTab, 10);
        // 读取 props.series 来保存
        if (!series || isNaN(currentSeriesIndex) || currentSeriesIndex < 0 || currentSeriesIndex >= series.length) {
            message.error('无法获取当前系列配置 (来自Props)');
            return;
        }

        const currentConfig = series[currentSeriesIndex]; // 从 props 读取

        // 创建一个更干净的预设配置，只保留样式相关属性
        const configToSave: Partial<SeriesItem> = {};

        // 明确指定要保存的样式属性
        const stylesToSave = [
            'color', 'itemStyle', 'lineStyle', 'areaStyle', 'label',
            'emphasis', 'smooth', 'symbol', 'symbolSize', 'barWidth',
            'barGap', 'barCategoryGap', 'showBackground', 'backgroundStyle',
            'stack', 'radius', 'startAngle', 'roseType', 'avoidLabelOverlap',
            'minShowLabelAngle', 'legendHoverLink', 'connectNulls', 'z',
            'zlevel', 'animation', 'animationDuration', 'animationEasing',
            'selectedMode'
        ];

        // 只复制样式相关属性
        stylesToSave.forEach(prop => {
            if (currentConfig[prop] !== undefined) {
                configToSave[prop] = currentConfig[prop];
            }
        });

        // 确保未复制不应保存的属性
        delete configToSave.name;
        delete configToSave.type;
        delete configToSave.data;
        delete configToSave.id;

        console.log('保存预设 - 待保存配置:', configToSave);

        if (saveAsPreset(presetName, configToSave as SeriesItem)) {
            setShowPresetModal(false);
            setPresetName('');
            message.success(`预设 "${presetName}" 保存成功`);
        }
    }, [presetName, activeTab, series, saveAsPreset]); // 依赖 props.series

    // 预设面板内容 (onClick 中调用 applyPreset，applyPreset 已修改为使用 props.series)
    const presetsContent = (
        <div style={{ width: 300, maxHeight: 400, overflow: 'auto' }}>
            <Typography.Title level={5}>应用系列预设 ({chartType})</Typography.Title>
            <Row gutter={[8, 8]}>
                {allPresets.map((preset) => (
                    <Col span={12} key={preset.name}>
                        <div
                            style={{
                                border: '1px solid #d9d9d9',
                                borderRadius: 4,
                                padding: 8,
                                cursor: 'pointer',
                                backgroundColor: lastAppliedPreset === preset.name ? '#e6f7ff' : 'transparent',
                                position: 'relative',
                                height: 80, // 固定高度以便预览
                                display: 'flex',
                                flexDirection: 'column',
                                justifyContent: 'space-between'
                            }}
                            onClick={() => {
                                // applyPreset 内部会处理合并逻辑，包括保留 name/type/data
                                const configToApply = { ...preset.config, name: preset.name };
                                applyPreset(configToApply);
                            }}
                        >
                            <Typography.Text strong ellipsis style={{ display: 'block' }}>
                                {preset.name}
                            </Typography.Text>
                            {/* 预设示例 - 简化预览 */}
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                marginTop: 4,
                                fontSize: 12,
                                color: '#666'
                            }}>
                                <div style={{
                                    width: 12,
                                    height: 12,
                                    backgroundColor: typeof preset.config.color === 'string' ? preset.config.color : '#5470c6',
                                    borderRadius: '50%',
                                    marginRight: 4
                                }}></div>
                                <Typography.Text ellipsis style={{ flex: 1 }}>
                                    {preset.config.type}
                                    {preset.config.smooth && ' (平滑)'}
                                    {preset.config.areaStyle && ' (区域)'}
                                    {preset.config.roseType && ` (${preset.config.roseType})`}
                                </Typography.Text>
                            </div>

                            {/* 删除按钮 - 仅显示在自定义预设上 */}
                            {!preset.isDefault && (
                                <Button
                                    type="text"
                                    size="small"
                                    icon={<DeleteOutlined />}
                                    style={{ position: 'absolute', top: 2, right: 2, zIndex: 1 }}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        deletePreset(preset.name);
                                    }}
                                />
                            )}
                        </div>
                    </Col>
                ))}
            </Row>
            <Divider style={{ margin: '12px 0' }} />
            <Button
                type="primary"
                icon={<SaveOutlined />}
                block
                onClick={() => setShowPresetModal(true)}
                // 禁用条件也基于 props.series
                disabled={!series || series.length === 0 || isNaN(parseInt(activeTab, 10)) || parseInt(activeTab, 10) >= series.length}
            >
                保存当前系列样式为预设
            </Button>
        </div>
    );


    // 处理系列配置更改 - 这个函数修改的是内部 seriesConfig 状态，然后通过 onChange 传递出去
    // 这部分逻辑可能需要重新审视，是否应该直接调用 onChange 而不维护内部状态？
    // 暂时保留，因为它驱动了表单控件的实时更新
    const handleSeriesChange = (index: number, key: string, value: unknown) => {
        // 检查索引有效性，防止读取旧的 seriesConfig 状态导致越界
        if (index < 0 || index >= seriesConfig.length) {
            console.error(`【SeriesConfig】handleSeriesChange: 无效的索引 ${index}`);
            return;
        }
        const newSeries = [...seriesConfig]; // 基于当前内部 UI 状态创建副本

        // 处理嵌套属性，例如 'itemStyle.opacity'
        if (key.includes('.')) {
            const keys = key.split('.');
            // 使用类型断言指定 current 类型为 SafeRecord<unknown>
            let current: SafeRecord<unknown> = newSeries[index] as SafeRecord<unknown>;

            for (let i = 0; i < keys.length - 1; i++) {
                // 确保路径上的对象存在
                if (current[keys[i]] === undefined || current[keys[i]] === null) {
                    current[keys[i]] = {};
                } else if (typeof current[keys[i]] !== 'object') {
                    console.warn(`【SeriesConfig】handleSeriesChange: 路径 ${keys.slice(0, i + 1).join('.')} 不是对象，将被覆盖`);
                    current[keys[i]] = {};
                }
                // 安全地转换 current[keys[i]] 为嵌套对象
                current = current[keys[i]] as SafeRecord<unknown>;
            }

            // 检查 final current 是否是对象
            if (typeof current !== 'object' || current === null) {
                console.error(`【SeriesConfig】handleSeriesChange: 最终路径不是有效对象，无法设置属性 ${keys[keys.length - 1]}`);
                // 可以选择在这里重置路径或返回
                return;
            }

            current[keys[keys.length - 1]] = value;
        } else {
            // 使用类型安全的方式设置属性
            (newSeries[index] as SafeRecord<unknown>)[key] = value;
        }

        console.log(`【SeriesConfig】handleSeriesChange: 更新内部状态并触发 onChange`, newSeries);
        setSeriesConfig(newSeries); // 更新内部UI状态
        onChange(newSeries); // 将修改后的数据传递给父组件
    };

    // 添加新系列
    const handleAddSeries = () => {
        // 基于 props.series (或默认值) 添加
        const baseSeries = series && series.length > 0 ? series : [];
        const newCompleteSeries = [...baseSeries, {
            ...defaultSeriesConfig,
            name: `系列 ${baseSeries.length + 1}`,
            type: chartType?.toLowerCase() || 'line', // 明确设置类型
            // 确保新系列有数据？或者让父组件处理？取决于数据流设计
            data: [] // 明确添加空数据
        }];
        onChange(newCompleteSeries as SeriesItem[]); // 使用类型断言
    };

    // 删除系列
    const handleRemoveSeries = (indexToRemove: number) => {
        // 基于 props.series 操作
        if (!series || series.length <= 1) return; // 至少保留一个系列

        const newCompleteSeries = series.filter((_, i) => i !== indexToRemove);
        // setSeriesConfig(newCompleteSeries); // 更新内部状态
        onChange(newCompleteSeries as SeriesItem[]); // 触发父组件更新
        // activeTab 的处理移到 useEffect 中
    };

    // 当图表类型改变时，由父组件处理 series 的 type 更新，这里只需要同步 UI 状态
    React.useEffect(() => {
        // 这个 effect 主要确保内部 seriesConfig 与 chartType 对应的默认值一致
        // 并且重置预设状态
        const newDefaultConfig = {
            ...defaultSeriesConfig,
            type: chartType?.toLowerCase() as ChartType || 'line'
        };
        // 如果 series prop 还没准备好或者类型不匹配，用默认值更新内部状态
        if (!series || series.length === 0 || series.some(s => s.type !== chartType?.toLowerCase())) {
            setSeriesConfig([newDefaultConfig]); // 取消注释，确保内部状态更新
        } else if (series && series.length > 0) {
            // 更新现有系列的类型
            const updatedSeries = series.map(item => ({
                ...item,
                type: chartType?.toLowerCase() as ChartType || 'line'
            }));
            setSeriesConfig(updatedSeries as SeriesItem[]);
        }
        // 重置上次应用的预设，因为图表类型变了
        setLastAppliedPreset('');
    }, [chartType]); // 依赖项仅为 chartType

    // --- 其他 handleXXXChange 函数保持不变，它们调用 handleSeriesChange ---
    // 处理柱宽变更
    const handleBarWidthChange = (value: number | null, index: number) => {
        handleSeriesChange(index, 'barWidth', value);
    };

    // 处理平滑曲线变更
    const handleSmoothChange = (checked: boolean, index: number) => {
        handleSeriesChange(index, 'smooth', checked);
    };

    // 处理堆叠设置变更
    const handleStackChange = (value: string, index: number) => {
        handleSeriesChange(index, 'stack', value || undefined);
    };

    // 处理3D图表的shading属性
    const handleShadingChange = (value: string, index: number) => {
        handleSeriesChange(index, 'shading', value);
    };

    // 处理标记大小变更
    const handleSymbolSizeChange = (value: number | null, index: number) => {
        handleSeriesChange(index, 'symbolSize', value);
    };

    // 处理标记类型变更
    const handleSymbolChange = (value: string, index: number) => {
        handleSeriesChange(index, 'symbol', value);
    };

    // 处理区域填充变更
    const handleAreaStyleChange = (checked: boolean, index: number) => {
        handleSeriesChange(index, 'areaStyle', checked ? {} : undefined);
    };

    // 处理标签显示变更
    const handleLabelShowChange = (checked: boolean, index: number) => {
        handleSeriesChange(index, 'label.show', checked); // 直接修改嵌套属性
    };

    // 处理标签位置变更
    const handleLabelPositionChange = (value: string, index: number) => {
        handleSeriesChange(index, 'label.position', value); // 直接修改嵌套属性
    };
    // 处理标签字体大小
    const handleLabelFontSizeChange = (value: number | null, index: number) => {
        handleSeriesChange(index, 'label.fontSize', value);
    };

    // 处理标签颜色
    const handleLabelColorChange = (color: ColorValue, index: number) => {
        handleSeriesChange(index, 'label.color', typeof color === 'object' && 'toHexString' in color ? color.toHexString() : color);
    };

    // 处理标签背景色
    const handleLabelBgColorChange = (color: ColorValue, index: number) => {
        handleSeriesChange(index, 'label.backgroundColor', typeof color === 'object' && 'toHexString' in color ? color.toHexString() : color);
    };

    // 处理标签格式化
    const handleLabelFormatterChange = (value: string, index: number) => {
        let formatter: string | undefined;
        if (value === 'percent') {
            formatter = '{d}%';
        } else if (value === 'value') {
            formatter = '{c}';
        } else if (value === 'custom') {
            formatter = '{b}: {c} ({d}%)'; // 示例，可能需要更复杂的逻辑
        } else {
            formatter = undefined; // 'default'
        }
        handleSeriesChange(index, 'label.formatter', formatter);
    };


    // 处理图形样式透明度变更
    const handleItemStyleOpacityChange = (value: number | null, index: number) => {
        handleSeriesChange(index, 'itemStyle.opacity', value === null ? undefined : value);
    };

    // 处理轮廓线宽度变更
    const handleItemStyleBorderWidthChange = (value: number | null, index: number) => {
        handleSeriesChange(index, 'itemStyle.borderWidth', value);
    };

    // 处理轮廓线颜色变更
    const handleItemStyleBorderColorChange = (color: ColorValue, index: number) => {
        handleSeriesChange(index, 'itemStyle.borderColor', typeof color === 'object' && 'toHexString' in color ? color.toHexString() : color);
    };
    // 处理柱状图圆角
    const handleItemStyleBorderRadiusChange = (value: number | null, index: number) => {
        handleSeriesChange(index, 'itemStyle.borderRadius', value);
    };

    // 处理高亮样式缩放变更
    const handleEmphasisScaleChange = (checked: boolean, index: number) => {
        handleSeriesChange(index, 'emphasis.scale', checked ? 1.1 : undefined);
    };
    // 处理高亮聚焦模式
    const handleEmphasisFocusChange = (value: string, index: number) => {
        handleSeriesChange(index, 'emphasis.focus', value === 'none' ? undefined : value);
    };

    // 处理数据排序方式变更
    const handleSortChange = (value: string, index: number) => {
        handleSeriesChange(index, 'sort', value === 'none' ? undefined : value);
    };

    // 处理动画持续时间变更
    const handleAnimationDurationChange = (value: number | null, index: number) => {
        handleSeriesChange(index, 'animationDuration', value);
    };

    // 处理动画缓动效果变更
    const handleAnimationEasingChange = (value: string, index: number) => {
        handleSeriesChange(index, 'animationEasing', value);
    };

    // 处理图形形状变更
    const handleSymbolTypeChange = (value: string, index: number) => {
        handleSeriesChange(index, 'symbol', value);
    };
    // 处理 Z 层级
    const handleZChange = (value: number | null, index: number) => {
        handleSeriesChange(index, 'z', value);
    };

    // 处理联动高亮
    const handleSelectedModeChange = (checked: boolean, index: number) => {
        handleSeriesChange(index, 'selectedMode', checked || undefined);
    };


    // 处理标记点配置变更
    const handleMarkPointConfigChange = (index: number, config: any) => {
        handleSeriesChange(index, 'markPoint', config);
    };

    // 处理标记线配置变更
    const handleMarkLineConfigChange = (index: number, config: any) => {
        handleSeriesChange(index, 'markLine', config);
    };

    // 处理标记区域配置变更
    const handleMarkAreaConfigChange = (index: number, config: any) => {
        handleSeriesChange(index, 'markArea', config);
    };

    // 处理视觉映射配置变更
    const handleVisualMapConfigChange = (index: number, config: any) => {
        handleSeriesChange(index, 'visualMap', config);
    };

    // 处理提示框配置变更
    const handleTooltipConfigChange = (index: number, config: any) => {
        handleSeriesChange(index, 'tooltip', config);
    };


    // 表单项标题组件
    const FormItemLabel = ({ children, tooltip }: { children: React.ReactNode, tooltip?: string }) => (
        <div style={{ marginBottom: 4, display: 'flex', alignItems: 'center' }}>
            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                {children}
            </Typography.Text>
            {tooltip && (
                <Tooltip title={tooltip}>
                    <InfoCircleOutlined style={{ marginLeft: 4, fontSize: 12, color: '#999' }} />
                </Tooltip>
            )}
        </div>
    );

    // 渲染表单项，根据图表类型展示不同配置
    // 这个函数现在读取的是内部 seriesConfig 状态来渲染 UI
    const renderSeriesForm = (item: SeriesItem, index: number) => {
        if (!item) {
            // 如果内部状态还没跟上 props，显示加载或提示
            console.warn(`【SeriesConfig】renderSeriesForm: 索引 ${index} 的系列在内部状态中未定义`);
            return <div>Loading series config...</div>;
        }

        // 确保item.type有值
        const safeItem = {
            ...item,
            type: item.type || chartType?.toLowerCase() || 'line'
        } as SeriesItem & SafeRecord<unknown>; // 使用类型断言确保类型兼容

        return (
            <Form layout="vertical" key={`${safeItem.name}-${index}`}> {/* Use a more stable key */}
                <Collapse
                    activeKey={expandedSections}
                    onChange={(keys) => setExpandedSections(keys as string[])}
                    bordered={false}
                    items={[
                        {
                            key: "basic",
                            label: (
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <SettingOutlined style={{ marginRight: 8 }} />
                                    <Typography.Text strong>基础配置</Typography.Text>
                                </div>
                            ),
                            children: (
                                <Row gutter={[16, 8]}>
                                    <Col span={24}>
                                        <div style={{ color: '#999', marginBottom: 8, fontSize: 12 }}>
                                            当前系列类型: {safeItem.type} (字符串形式: {String(safeItem.type)})
                                        </div>
                                    </Col>

                                    <Col span={12}>
                                        <FormItemLabel tooltip="系列名称，用于图例展示和标识数据">
                                            系列名称
                                        </FormItemLabel>
                                        <Input
                                            value={safeItem.name}
                                            onChange={e => handleSeriesChange(index, 'name', e.target.value)}
                                            placeholder="请输入系列名称"
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="系列数据的颜色">
                                            系列颜色
                                        </FormItemLabel>
                                        <ColorPicker
                                            value={typeof safeItem.color === 'object' && safeItem.color?.colorStops?.[0]?.color || (typeof safeItem.color === 'string' ? safeItem.color : '#5470c6')}
                                            onChange={color => {
                                                const colorString = typeof color === 'string' ? color : (color.toHexString ? color.toHexString() : String(color));
                                                handleSeriesChange(index, 'color', colorString);
                                            }}
                                            showText
                                        />
                                        {typeof safeItem.color === 'object' && (
                                            <Tooltip title="当前为渐变色，颜色选择器仅显示主色调。修改将覆盖为纯色。">
                                                <InfoCircleOutlined style={{ marginLeft: 8, color: '#faad14' }} />
                                            </Tooltip>
                                        )}
                                    </Col>

                                    {(safeItem.type === 'line' || safeItem.type === 'bar' || safeItem.type === 'scatter') && (
                                        <Col span={12}>
                                            <FormItemLabel tooltip="当有多系列时，是否进行数据堆叠">
                                                堆叠设置
                                            </FormItemLabel>
                                            <Select
                                                value={safeItem.stack}
                                                onChange={value => handleStackChange(value, index)}
                                                placeholder="选择堆叠分组"
                                                style={{ width: '100%' }}
                                                allowClear
                                                options={[
                                                    { label: '无堆叠', value: '' },
                                                    { label: '堆叠组 A', value: 'stackA' },
                                                    { label: '堆叠组 B', value: 'stackB' },
                                                    { label: '堆叠组 C', value: 'stackC' }
                                                ]}
                                            />
                                        </Col>
                                    )}

                                    <Col span={12}>
                                        <FormItemLabel tooltip="图表中数据的排序方式">
                                            数据排序
                                        </FormItemLabel>
                                        <Select
                                            value={safeItem.sort || 'none'}
                                            onChange={value => handleSortChange(value, index)}
                                            style={{ width: '100%' }}
                                            options={[
                                                { label: '无排序', value: 'none' },
                                                { label: '升序', value: 'ascending' },
                                                { label: '降序', value: 'descending' }
                                            ]}
                                        />
                                    </Col>
                                </Row>
                            )
                        },
                        {
                            key: "style",
                            label: (
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <AppstoreOutlined style={{ marginRight: 8 }} />
                                    <Typography.Text strong>样式配置</Typography.Text>
                                </div>
                            ),
                            children: (
                                <Row gutter={[16, 8]}>
                                    {/* 调试信息 */}
                                    <Col span={24}>
                                        <div style={{ color: '#999', marginBottom: 8, fontSize: 12 }}>
                                            当前系列类型: {safeItem.type} (字符串形式: {String(safeItem.type)})
                                        </div>
                                    </Col>

                                    {/* 折线图特定配置 */}
                                    {safeItem.type === 'line' && (
                                        <>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="是否平滑曲线显示">
                                                    平滑曲线
                                                </FormItemLabel>
                                                <Switch
                                                    checked={!!safeItem.smooth}
                                                    onChange={checked => handleSmoothChange(checked, index)}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="线条宽度，单位为px">
                                                    线宽
                                                </FormItemLabel>
                                                <InputNumber
                                                    value={safeItem.lineStyle?.width ?? 1}
                                                    onChange={value => handleSeriesChange(index, 'lineStyle.width', value)}
                                                    min={0}
                                                    max={10}
                                                    style={{ width: '100%' }}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="是否显示区域填充">
                                                    区域填充
                                                </FormItemLabel>
                                                <Switch
                                                    checked={!!safeItem.areaStyle}
                                                    onChange={checked => handleAreaStyleChange(checked, index)}
                                                />
                                            </Col>
                                            {safeItem.areaStyle && (
                                                <Col span={12}>
                                                    <FormItemLabel tooltip="区域填充透明度">
                                                        填充透明度
                                                    </FormItemLabel>
                                                    <Slider
                                                        value={safeItem.areaStyle.opacity ?? 0.2}
                                                        onChange={value => handleSeriesChange(index, 'areaStyle.opacity', value)}
                                                        min={0}
                                                        max={1}
                                                        step={0.1}
                                                    />
                                                </Col>
                                            )}
                                            <Col span={12}>
                                                <FormItemLabel tooltip="线条类型">
                                                    线条类型
                                                </FormItemLabel>
                                                <Select
                                                    value={safeItem.lineStyle?.type || 'solid'}
                                                    onChange={value => handleSeriesChange(index, 'lineStyle.type', value)}
                                                    style={{ width: '100%' }}
                                                    options={[
                                                        { label: '实线', value: 'solid' },
                                                        { label: '虚线', value: 'dashed' },
                                                        { label: '点线', value: 'dotted' }
                                                    ]}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="折线拐点的样式">
                                                    拐点形状
                                                </FormItemLabel>
                                                <Select
                                                    value={safeItem.symbol || 'emptyCircle'}
                                                    onChange={value => handleSymbolTypeChange(value, index)}
                                                    style={{ width: '100%' }}
                                                    options={[
                                                        { label: '空心圆', value: 'emptyCircle' },
                                                        { label: '实心圆', value: 'circle' },
                                                        { label: '方形', value: 'rect' },
                                                        { label: '三角形', value: 'triangle' },
                                                        { label: '菱形', value: 'diamond' },
                                                        { label: '箭头', value: 'arrow' },
                                                        { label: '无', value: 'none' }
                                                    ]}
                                                />
                                            </Col>
                                            {safeItem.symbol !== 'none' && (
                                                <Col span={12}>
                                                    <FormItemLabel tooltip="拐点大小，单位为px">
                                                        拐点大小
                                                    </FormItemLabel>
                                                    <InputNumber
                                                        value={safeItem.symbolSize ?? 4}
                                                        onChange={value => handleSymbolSizeChange(value, index)}
                                                        min={0}
                                                        max={20}
                                                        style={{ width: '100%' }}
                                                    />
                                                </Col>
                                            )}
                                        </>
                                    )}

                                    {/* 柱状图特定配置 */}
                                    {safeItem.type === 'bar' && (
                                        <>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="柱条宽度，单位px或百分比，如 30px 或 50%">
                                                    柱条宽度
                                                </FormItemLabel>
                                                <Input
                                                    value={safeItem.barWidth}
                                                    onChange={e => handleSeriesChange(index, 'barWidth', e.target.value || undefined)} // 允许清空
                                                    placeholder="自动 或 30px 或 50%"
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="同一类目柱条间距百分比，如'20%'表示间距为柱宽的20%">
                                                    柱间距(同类目)
                                                </FormItemLabel>
                                                <Input
                                                    value={safeItem.barGap}
                                                    onChange={e => handleSeriesChange(index, 'barGap', e.target.value || undefined)}
                                                    placeholder="默认 30%"
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="不同类目柱条间距百分比，如'10%'">
                                                    柱间距(不同类目)
                                                </FormItemLabel>
                                                <Input
                                                    value={safeItem.barCategoryGap}
                                                    onChange={e => handleSeriesChange(index, 'barCategoryGap', e.target.value || undefined)}
                                                    placeholder="默认 20%"
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="柱条的背景色，显示在柱条背后">
                                                    显示背景色
                                                </FormItemLabel>
                                                <Switch
                                                    checked={!!safeItem.showBackground}
                                                    onChange={checked => handleSeriesChange(index, 'showBackground', checked)}
                                                />
                                                {safeItem.showBackground && (
                                                    <ColorPicker
                                                        style={{ marginLeft: 8 }}
                                                        value={safeItem.backgroundStyle?.color ?? '#f3f3f3'}
                                                        onChange={color => handleSeriesChange(index, 'backgroundStyle.color', typeof color === 'object' && 'toHexString' in color ? color.toHexString() : color)}
                                                        size='small'
                                                    />
                                                )}
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="柱条圆角半径，单位px, 可设置单个值或数组[上左, 上右, 下右, 下左]">
                                                    圆角半径
                                                </FormItemLabel>
                                                {/* 简化处理：暂时只支持单个数字 */}
                                                <InputNumber
                                                    value={typeof safeItem.itemStyle?.borderRadius === 'number' ? safeItem.itemStyle.borderRadius : undefined}
                                                    onChange={value => handleItemStyleBorderRadiusChange(value, index)}
                                                    min={0}
                                                    placeholder="e.g. 5"
                                                    style={{ width: '100%' }}
                                                    disabled={typeof safeItem.itemStyle?.borderRadius !== 'number' && typeof safeItem.itemStyle?.borderRadius !== 'undefined'}
                                                />
                                            </Col>
                                        </>
                                    )}

                                    {/* 散点图特定配置 */}
                                    {safeItem.type === 'scatter' && (
                                        <>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="散点形状">
                                                    散点形状
                                                </FormItemLabel>
                                                <Select
                                                    value={safeItem.symbol || 'circle'}
                                                    onChange={value => handleSymbolChange(value, index)}
                                                    style={{ width: '100%' }}
                                                    options={[
                                                        { label: '实心圆', value: 'circle' },
                                                        { label: '空心圆', value: 'emptyCircle' },
                                                        { label: '方形', value: 'rect' },
                                                        { label: '三角形', value: 'triangle' },
                                                        { label: '菱形', value: 'diamond' },
                                                        { label: '箭头', value: 'arrow' }
                                                    ]}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="散点大小，单位px">
                                                    散点大小
                                                </FormItemLabel>
                                                <InputNumber
                                                    value={safeItem.symbolSize ?? 10}
                                                    onChange={value => handleSymbolSizeChange(value, index)}
                                                    min={1}
                                                    max={50}
                                                    style={{ width: '100%' }}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="是否启用散点阴影效果">
                                                    阴影效果
                                                </FormItemLabel>
                                                <Switch
                                                    checked={!!(safeItem.itemStyle?.shadowBlur)}
                                                    onChange={checked => {
                                                        handleSeriesChange(index, 'itemStyle.shadowBlur', checked ? 10 : undefined);
                                                        handleSeriesChange(index, 'itemStyle.shadowColor', checked ? 'rgba(0, 0, 0, 0.5)' : undefined);
                                                    }}
                                                />
                                            </Col>
                                            {safeItem.itemStyle?.shadowBlur && (
                                                <Col span={12}>
                                                    <FormItemLabel tooltip="阴影模糊大小">
                                                        阴影大小
                                                    </FormItemLabel>
                                                    <InputNumber
                                                        value={safeItem.itemStyle?.shadowBlur}
                                                        onChange={value => handleSeriesChange(index, 'itemStyle.shadowBlur', value)}
                                                        min={0}
                                                        max={25}
                                                        style={{ width: '100%' }}
                                                    />
                                                </Col>
                                            )}
                                        </>
                                    )}

                                    {/* 饼图特定配置 */}
                                    {safeItem.type === 'pie' && (
                                        <>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="内半径百分比，0%-100%，用于构建环形图">
                                                    内半径
                                                </FormItemLabel>
                                                <InputNumber
                                                    value={safeItem.radius && Array.isArray(safeItem.radius) && safeItem.radius.length > 0 ?
                                                        (typeof safeItem.radius[0] === 'string' ? parseFloat(safeItem.radius[0].replace('%', '')) : safeItem.radius[0])
                                                        : (typeof safeItem.radius === 'number' ? safeItem.radius : 0)} // 简化处理，假设只有一个数字或第一个是数字
                                                    onChange={value => {
                                                        const outerRadius = safeItem.radius && Array.isArray(safeItem.radius) && safeItem.radius.length > 1 ? safeItem.radius[1] : '70%';
                                                        handleSeriesChange(index, 'radius', [`${value ?? 0}%`, outerRadius]);
                                                    }}
                                                    min={0}
                                                    max={100}
                                                    formatter={value => `${value}%`}
                                                    parser={value => Number(value?.replace('%', ''))}
                                                    style={{ width: '100%' }}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="外半径百分比，最大100%">
                                                    外半径
                                                </FormItemLabel>
                                                <InputNumber
                                                    value={safeItem.radius && Array.isArray(safeItem.radius) && safeItem.radius.length > 1 ?
                                                        (typeof safeItem.radius[1] === 'string' ? parseFloat(safeItem.radius[1].replace('%', '')) : safeItem.radius[1])
                                                        : (typeof safeItem.radius === 'string' ? parseFloat(safeItem.radius.replace('%', '')) : 70)} // 简化处理
                                                    onChange={value => {
                                                        const innerRadius = safeItem.radius && Array.isArray(safeItem.radius) && safeItem.radius.length > 0 ? safeItem.radius[0] : '0%';
                                                        handleSeriesChange(index, 'radius', [innerRadius, `${value ?? 70}%`]);
                                                    }}
                                                    min={0}
                                                    max={100}
                                                    formatter={value => `${value}%`}
                                                    parser={value => Number(value?.replace('%', ''))}
                                                    style={{ width: '100%' }}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="起始角度，从水平向右开始，单位度">
                                                    起始角度
                                                </FormItemLabel>
                                                <InputNumber
                                                    value={safeItem.startAngle ?? 90}
                                                    onChange={value => handleSeriesChange(index, 'startAngle', value)}
                                                    min={0}
                                                    max={360}
                                                    style={{ width: '100%' }}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="扇区选中时的偏移距离">
                                                    扇区偏移 (高亮)
                                                </FormItemLabel>
                                                <InputNumber
                                                    value={safeItem.emphasis?.itemStyle?.offset ?? 10}
                                                    onChange={value => handleSeriesChange(index, 'emphasis.itemStyle.offset', value)}
                                                    min={0}
                                                    max={30}
                                                    style={{ width: '100%' }}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="是否显示南丁格尔图">
                                                    南丁格尔图
                                                </FormItemLabel>
                                                <Select
                                                    value={safeItem.roseType || ''}
                                                    onChange={value => handleSeriesChange(index, 'roseType', value || undefined)}
                                                    style={{ width: '100%' }}
                                                    allowClear
                                                    options={[
                                                        { label: '不启用', value: '' },
                                                        { label: '面积模式', value: 'area' },
                                                        { label: '半径模式', value: 'radius' }
                                                    ]}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="防止标签重叠策略">
                                                    防重叠
                                                </FormItemLabel>
                                                <Switch
                                                    checked={safeItem.avoidLabelOverlap !== false}
                                                    onChange={checked => handleSeriesChange(index, 'avoidLabelOverlap', checked)}
                                                />
                                            </Col>
                                            {safeItem.avoidLabelOverlap !== false && (
                                                <Col span={12}>
                                                    <FormItemLabel tooltip="小于此角度的扇区标签将隐藏">
                                                        最小显示角度
                                                    </FormItemLabel>
                                                    <InputNumber
                                                        value={safeItem.minShowLabelAngle ?? 0}
                                                        onChange={value => handleSeriesChange(index, 'minShowLabelAngle', value)}
                                                        min={0} max={45}
                                                        style={{ width: '100%' }}
                                                    />
                                                </Col>
                                            )}
                                        </>
                                    )}
                                </Row>
                            )
                        },
                        {
                            key: "label",
                            label: (
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <DotChartOutlined style={{ marginRight: 8 }} />
                                    <Typography.Text strong>数据标签</Typography.Text>
                                </div>
                            ),
                            children: (
                                <Row gutter={[16, 8]}>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="是否显示数据标签">
                                            显示标签
                                        </FormItemLabel>
                                        <Switch
                                            checked={safeItem.label?.show !== false} // 默认显示
                                            onChange={checked => handleLabelShowChange(checked, index)}
                                        />
                                    </Col>

                                    {safeItem.label?.show !== false && (
                                        <>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="标签位置">
                                                    标签位置
                                                </FormItemLabel>
                                                <Select
                                                    value={safeItem.label?.position || (safeItem.type === 'pie' ? 'outside' : 'top')}
                                                    onChange={value => handleLabelPositionChange(value, index)}
                                                    style={{ width: '100%' }}
                                                    options={
                                                        safeItem.type === 'pie' ?
                                                            [
                                                                { label: '外侧', value: 'outside' },
                                                                { label: '内侧', value: 'inside' },
                                                                { label: '中心', value: 'center' }
                                                            ] :
                                                            [
                                                                { label: '顶部', value: 'top' },
                                                                { label: '左侧', value: 'left' },
                                                                { label: '右侧', value: 'right' },
                                                                { label: '底部', value: 'bottom' },
                                                                { label: '内部', value: 'inside' }
                                                                // 更多位置根据图表类型添加...
                                                            ]
                                                    }
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="标签字体大小，单位px">
                                                    字体大小
                                                </FormItemLabel>
                                                <InputNumber
                                                    value={safeItem.label?.fontSize ?? 12}
                                                    onChange={value => handleLabelFontSizeChange(value, index)}
                                                    min={8} max={30} style={{ width: '100%' }}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="标签颜色，默认自动取色">
                                                    标签颜色
                                                </FormItemLabel>
                                                <ColorPicker
                                                    value={safeItem.label?.color}
                                                    onChange={color => handleLabelColorChange(color, index)}
                                                    showText allowClear
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="标签背景色">
                                                    背景色
                                                </FormItemLabel>
                                                <ColorPicker
                                                    value={typeof safeItem.label?.backgroundColor === 'string' ? safeItem.label.backgroundColor : undefined}
                                                    onChange={color => handleLabelBgColorChange(color, index)}
                                                    showText allowClear
                                                    disabled={typeof safeItem.label?.backgroundColor === 'object'}
                                                />
                                                {typeof safeItem.label?.backgroundColor === 'object' && (
                                                    <Tooltip title="当前为渐变背景色，无法在此处编辑。">
                                                        <InfoCircleOutlined style={{ marginLeft: 8, color: '#faad14' }} />
                                                    </Tooltip>
                                                )}
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="标签旋转角度">
                                                    旋转角度
                                                </FormItemLabel>
                                                <InputNumber
                                                    value={(safeItem.label as ExtendedLabelConfig)?.rotate ?? 0}
                                                    onChange={value => handleSeriesChange(index, 'label.rotate', value)}
                                                    min={-90} max={90} step={15} style={{ width: '100%' }}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="标签内边距 [上, 右, 下, 左]">
                                                    内边距
                                                </FormItemLabel>
                                                {/* 简化：只设置一个值 */}
                                                <InputNumber
                                                    value={Array.isArray((safeItem.label as ExtendedLabelConfig)?.padding) ?
                                                        Number(((safeItem.label as ExtendedLabelConfig).padding as number[])[0]) :
                                                        Number((safeItem.label as ExtendedLabelConfig)?.padding ?? 0)}
                                                    onChange={value => handleSeriesChange(index, 'label.padding', value === null ? undefined : [value, value, value, value])}
                                                    min={0} max={20} style={{ width: '100%' }} placeholder="e.g. 5"
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="标签圆角半径">
                                                    圆角半径
                                                </FormItemLabel>
                                                <InputNumber
                                                    value={(safeItem.label as ExtendedLabelConfig)?.borderRadius ?? 0}
                                                    onChange={value => handleSeriesChange(index, 'label.borderRadius', value)}
                                                    min={0} max={20} style={{ width: '100%' }}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="数值格式化方式">
                                                    格式化
                                                </FormItemLabel>
                                                <Select
                                                    value={safeItem.label?.formatter ? (safeItem.label.formatter === '{d}%' ? 'percent' : (safeItem.label.formatter === '{c}' ? 'value' : 'custom')) : 'default'}
                                                    onChange={value => handleLabelFormatterChange(value, index)}
                                                    style={{ width: '100%' }}
                                                    options={[
                                                        { label: '默认', value: 'default' },
                                                        { label: '仅百分比 (饼图)', value: 'percent', disabled: safeItem.type !== 'pie' },
                                                        { label: '仅数值', value: 'value' },
                                                        { label: '名称+数值+百分比 (饼图)', value: 'custom', disabled: safeItem.type !== 'pie' }
                                                    ]}
                                                />
                                            </Col>
                                        </>
                                    )}
                                </Row>
                            )
                        },
                        {
                            key: "itemStyle", // 图形样式作为一个独立 सेक्शン
                            label: (
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <BgColorsOutlined style={{ marginRight: 8 }} />
                                    <Typography.Text strong>图形样式</Typography.Text>
                                </div>
                            ),
                            children: (
                                <Row gutter={[16, 8]}>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="图形透明度 (0-1)">
                                            图形透明度
                                        </FormItemLabel>
                                        <Slider
                                            value={safeItem.itemStyle?.opacity ?? 1}
                                            onChange={value => handleItemStyleOpacityChange(value, index)}
                                            min={0} max={1} step={0.05}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="图形描边宽度，单位px">
                                            描边宽度
                                        </FormItemLabel>
                                        <InputNumber
                                            value={safeItem.itemStyle?.borderWidth ?? (safeItem.type === 'bar' ? 0 : (safeItem.type === 'pie' ? 1 : 0))} // 不同类型给个默认值？
                                            onChange={value => handleItemStyleBorderWidthChange(value, index)}
                                            min={0} max={10} style={{ width: '100%' }}
                                        />
                                    </Col>
                                    {(safeItem.itemStyle?.borderWidth ?? 0) > 0 && (
                                        <Col span={12}>
                                            <FormItemLabel tooltip="图形描边颜色">
                                                描边颜色
                                            </FormItemLabel>
                                            <ColorPicker
                                                value={safeItem.itemStyle?.borderColor ?? '#000'}
                                                onChange={color => handleItemStyleBorderColorChange(color, index)}
                                                showText allowClear
                                            />
                                        </Col>
                                    )}
                                    <Col span={12}>
                                        <FormItemLabel tooltip="图形描边类型">
                                            描边类型
                                        </FormItemLabel>
                                        <Select
                                            value={(safeItem.itemStyle as ExtendedItemStyleConfig)?.borderType || 'solid'}
                                            onChange={value => handleSeriesChange(index, 'itemStyle.borderType', value)}
                                            style={{ width: '100%' }}
                                            options={[
                                                { label: '实线', value: 'solid' },
                                                { label: '虚线', value: 'dashed' },
                                                { label: '点线', value: 'dotted' }
                                            ]}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="图形阴影模糊大小">
                                            阴影大小
                                        </FormItemLabel>
                                        <InputNumber
                                            value={safeItem.itemStyle?.shadowBlur ?? 0}
                                            onChange={value => handleSeriesChange(index, 'itemStyle.shadowBlur', value)}
                                            min={0} max={25} style={{ width: '100%' }}
                                        />
                                    </Col>
                                    {(safeItem.itemStyle?.shadowBlur ?? 0) > 0 && (
                                        <>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="图形阴影颜色">
                                                    阴影颜色
                                                </FormItemLabel>
                                                <ColorPicker
                                                    value={safeItem.itemStyle?.shadowColor ?? 'rgba(0, 0, 0, 0.5)'}
                                                    onChange={color => handleSeriesChange(index, 'itemStyle.shadowColor', typeof color === 'object' && 'toHexString' in color ? color.toHexString() : color)}
                                                    showText allowClear
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="阴影水平偏移">
                                                    阴影X偏移
                                                </FormItemLabel>
                                                <InputNumber
                                                    value={safeItem.itemStyle?.shadowOffsetX ?? 0}
                                                    onChange={value => handleSeriesChange(index, 'itemStyle.shadowOffsetX', value)}
                                                    style={{ width: '100%' }}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <FormItemLabel tooltip="阴影垂直偏移">
                                                    阴影Y偏移
                                                </FormItemLabel>
                                                <InputNumber
                                                    value={safeItem.itemStyle?.shadowOffsetY ?? 0}
                                                    onChange={value => handleSeriesChange(index, 'itemStyle.shadowOffsetY', value)}
                                                    style={{ width: '100%' }}
                                                />
                                            </Col>
                                        </>
                                    )}
                                </Row>
                            )
                        },
                        {
                            key: "emphasis", // 高亮状态作为一个独立 सेक्शン
                            label: (
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <AimOutlined style={{ marginRight: 8 }} /> {/* Using AimOutlined */}
                                    <Typography.Text strong>高亮状态</Typography.Text>
                                </div>
                            ),
                            children: (
                                <Row gutter={[16, 8]}>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="是否淡出其他图形">
                                            淡出其他
                                        </FormItemLabel>
                                        <Switch
                                            checked={(safeItem.emphasis as ExtendedEmphasisConfig)?.disabled !== true}
                                            onChange={checked => handleSeriesChange(index, 'emphasis.disabled', !checked)}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="高亮聚焦模式">
                                            聚焦模式
                                        </FormItemLabel>
                                        <Select
                                            value={(safeItem.emphasis as ExtendedEmphasisConfig)?.focus || 'none'}
                                            onChange={value => handleEmphasisFocusChange(value, index)}
                                            style={{ width: '100%' }}
                                            options={[
                                                { label: '无', value: 'none' },
                                                { label: '聚焦系列', value: 'series' },
                                                { label: '聚焦数据项', value: 'self' }
                                            ]}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="高亮时是否放大图形">
                                            高亮缩放
                                        </FormItemLabel>
                                        <Switch
                                            checked={(safeItem.emphasis as ExtendedEmphasisConfig)?.scale !== false}
                                            onChange={checked => handleSeriesChange(index, 'emphasis.scale', checked)}
                                        />
                                    </Col>
                                    {safeItem.emphasis?.scale !== false && (
                                        <Col span={12}>
                                            <FormItemLabel tooltip="高亮放大倍数 (基于原始大小)">
                                                放大倍数
                                            </FormItemLabel>
                                            <InputNumber
                                                value={typeof safeItem.emphasis?.scale === 'number' ? safeItem.emphasis.scale : 1.1}
                                                onChange={value => handleSeriesChange(index, 'emphasis.scale', value ?? 1.1)}
                                                min={1} max={2} step={0.1} style={{ width: '100%' }}
                                            />
                                        </Col>
                                    )}
                                    {/* 可在此添加高亮状态下的 itemStyle, label 等配置 */}
                                    <Col span={12}>
                                        <FormItemLabel tooltip="高亮时标签颜色">
                                            高亮标签颜色
                                        </FormItemLabel>
                                        <ColorPicker
                                            value={(safeItem.emphasis as ExtendedEmphasisConfig)?.label?.color}
                                            onChange={color => handleSeriesChange(index, 'emphasis.label.color', color.toHexString ? color.toHexString() : color)}
                                            showText allowClear
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="高亮时图形颜色">
                                            高亮图形颜色
                                        </FormItemLabel>
                                        <ColorPicker
                                            value={(safeItem.emphasis as ExtendedEmphasisConfig)?.itemStyle?.color}
                                            onChange={color => {
                                                const colorValue = typeof color === 'object' && 'toHexString' in color ?
                                                    color.toHexString() : color;
                                                handleSeriesChange(index, 'emphasis.itemStyle.color', colorValue);
                                            }}
                                            showText allowClear
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="高亮时描边颜色">
                                            高亮描边颜色
                                        </FormItemLabel>
                                        <ColorPicker
                                            value={(safeItem.emphasis as ExtendedEmphasisConfig)?.itemStyle?.borderColor}
                                            onChange={color => handleSeriesChange(index, 'emphasis.itemStyle.borderColor', color.toHexString ? color.toHexString() : color)}
                                            showText allowClear
                                        />
                                    </Col>
                                </Row>
                            )
                        },
                        {
                            key: "advanced",
                            label: (
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <SettingOutlined style={{ marginRight: 8 }} />
                                    <Typography.Text strong>高级/其他</Typography.Text>
                                </div>
                            ),
                            children: (
                                <Row gutter={[16, 8]}>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="图表动画时长，单位毫秒">
                                            动画时长
                                        </FormItemLabel>
                                        <InputNumber
                                            value={safeItem.animationDuration ?? 1000}
                                            onChange={value => handleAnimationDurationChange(value, index)}
                                            min={0} max={5000} step={100} style={{ width: '100%' }}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="动画缓动效果">
                                            动画效果
                                        </FormItemLabel>
                                        <Select
                                            value={safeItem.animationEasing || 'cubicOut'}
                                            onChange={value => handleAnimationEasingChange(value, index)}
                                            style={{ width: '100%' }}
                                            options={[
                                                { label: '线性', value: 'linear' },
                                                { label: '弹性冲击', value: 'elasticOut' },
                                                { label: '反弹', value: 'bounceOut' },
                                                { label: '立方缓动', value: 'cubicOut' },
                                                { label: '四次方缓动', value: 'quarticOut' },
                                                { label: '正弦缓动', value: 'sinusoidalOut' }
                                                // 更多效果可查 ECharts 文档
                                            ]}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="系列 Z 轴位置，大的会覆盖小的">
                                            Z 轴层级
                                        </FormItemLabel>
                                        <InputNumber
                                            value={safeItem.z ?? 2}
                                            onChange={value => handleZChange(value, index)}
                                            min={0} max={10} style={{ width: '100%' }}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="是否开启图例选中模式">
                                            图例选中模式
                                        </FormItemLabel>
                                        <Switch
                                            checked={(safeItem.legendHoverLink as boolean) || false}
                                            onChange={checked => handleSeriesChange(index, 'legendHoverLink', checked)}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="是否开启图表选中模式">
                                            数据选中模式
                                        </FormItemLabel>
                                        <Select
                                            value={typeof safeItem.selectedMode === 'string' ? safeItem.selectedMode : (safeItem.selectedMode === true ? 'single' : 'none')} // 映射布尔值为字符串
                                            onChange={value => handleSeriesChange(index, 'selectedMode', value === 'none' ? false : value)}
                                            style={{ width: '100%' }}
                                            options={[
                                                { label: '关闭', value: 'none' },
                                                { label: '单选', value: 'single' },
                                                { label: '多选', value: 'multiple' }
                                            ]}
                                        />
                                    </Col>
                                    <Col span={12}>
                                        <FormItemLabel tooltip="是否连接空数据点 (折线图)">
                                            连接空值(线图)
                                        </FormItemLabel>
                                        <Switch
                                            checked={!!safeItem.connectNulls}
                                            onChange={checked => handleSeriesChange(index, 'connectNulls', checked)}
                                            disabled={safeItem.type !== 'line'}
                                        />
                                    </Col>
                                    {/* 更多高级配置可根据需要添加 */}
                                </Row>
                            )
                        },
                        {
                            key: "markPoint",
                            label: (
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <AimOutlined style={{ marginRight: 8 }} />
                                    <Typography.Text strong>标记点</Typography.Text>
                                </div>
                            ),
                            children: (
                                <MarkPointConfig
                                    config={safeItem.markPoint}
                                    onChange={(config) => handleMarkPointConfigChange(index, config)}
                                />
                            )
                        },
                        {
                            key: "markLine",
                            label: (
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <SlackOutlined style={{ marginRight: 8 }} />
                                    <Typography.Text strong>标记线</Typography.Text>
                                </div>
                            ),
                            children: (
                                <MarkLineConfig
                                    config={safeItem.markLine}
                                    onChange={(config) => handleMarkLineConfigChange(index, config)}
                                />
                            )
                        },
                        {
                            key: "markArea",
                            label: (
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <BgColorsOutlined style={{ marginRight: 8 }} />
                                    <Typography.Text strong>标记区域</Typography.Text>
                                </div>
                            ),
                            children: (
                                <MarkAreaConfig
                                    config={safeItem.markArea}
                                    onChange={(config) => handleMarkAreaConfigChange(index, config)}
                                />
                            )
                        },
                        // VisualMap 通常是全局配置，放在系列里可能不太合适，除非是特定系列的映射
                        // {
                        //     key: "visualMap",
                        //     label: (
                        //         <div style={{ display: 'flex', alignItems: 'center' }}>
                        //             <AppstoreOutlined style={{ marginRight: 8 }} />
                        //             <Typography.Text strong>视觉映射 (系列)</Typography.Text>
                        //         </div>
                        //     ),
                        //     children: (
                        //         <VisualMapConfig
                        //             config={item.visualMap} // 假设 visualMap 可以是数组或单个对象
                        //             onChange={(config) => handleVisualMapConfigChange(index, config)}
                        //             isSeriesLevel={true} // 标识是系列级别的配置
                        //         />
                        //     )
                        // },
                        {
                            key: "tooltip",
                            label: (
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <InfoCircleOutlined style={{ marginRight: 8 }} />
                                    <Typography.Text strong>系列提示框</Typography.Text>
                                </div>
                            ),
                            children: (
                                <SeriesTooltipConfig
                                    tooltipConfig={safeItem.tooltip}
                                    onChange={(config) => handleTooltipConfigChange(index, config)}
                                />
                            )
                        }
                    ]}
                />
            </Form>
        );
    };

    // 主要渲染逻辑 - 使用内部 seriesConfig 驱动 Tabs 和 Form 的渲染
    return (
        <Card className="chart-config-card">
            <div className="chart-config-header" style={{ marginBottom: 16 }}>
                <Typography.Title level={5} style={{ margin: 0 }}>
                    系列配置
                    <Tooltip title="配置图表中的数据系列">
                        <InfoCircleOutlined style={{ fontSize: 14, marginLeft: 8 }} />
                    </Tooltip>
                </Typography.Title>
            </div>

            {seriesConfig && seriesConfig.length > 0 ? (
                <Tabs
                    activeKey={activeTab}
                    onChange={setActiveTab}
                    type="card"
                    items={seriesConfig.map((item, index) => ({ // 使用内部状态渲染 Tabs
                        label: (
                            <span>
                                {item.name || `系列 ${index + 1}`}
                                {seriesConfig.length > 1 && (
                                    <Button
                                        type="text"
                                        size="small"
                                        danger
                                        icon={<DeleteOutlined />}
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            handleRemoveSeries(index); // 使用基于 props 的删除逻辑
                                        }}
                                        style={{ marginLeft: 8 }}
                                    />
                                )}
                            </span>
                        ),
                        key: String(index),
                        // children 中渲染表单，也使用内部状态 item
                        children: renderSeriesForm(item, index)
                    }))}
                    tabBarExtraContent={
                        <Space>
                            <Popover
                                content={presetsContent}
                                title={null}
                                trigger="click"
                                placement="bottomRight"
                            >
                                <Button
                                    size="small"
                                    icon={<ImportOutlined />}
                                >
                                    应用预设
                                </Button>
                            </Popover>
                            <Button
                                type="primary"
                                icon={<PlusOutlined />}
                                onClick={handleAddSeries} // 使用基于 props 的添加逻辑
                                size="small"
                            >
                                添加系列
                            </Button>
                        </Space>
                    }
                />
            ) : (
                <div style={{ textAlign: 'center', padding: '20px' }}>
                    <Typography.Text type="secondary">请先添加一个系列 (或检查数据来源)</Typography.Text>
                    <Button
                        type="primary"
                        icon={<PlusOutlined />}
                        onClick={handleAddSeries} // 使用基于 props 的添加逻辑
                        size="small"
                        style={{ marginTop: 10 }}
                    >
                        添加系列
                    </Button>
                </div>
            )}

            {/* 保存预设模态对话框 (读取 props.series) */}
            <Modal
                title="保存为系列预设样式"
                open={showPresetModal}
                onOk={handleSavePreset}
                onCancel={() => setShowPresetModal(false)}
                okText="保存"
                cancelText="取消"
            >
                <div style={{ marginBottom: 16 }}>
                    <Typography.Paragraph>
                        {/* 读取 props.series 的名称 */}
                        将当前选中系列 "{series?.[parseInt(activeTab, 10)]?.name || `系列 ${parseInt(activeTab, 10) + 1}`}" 的样式配置保存为预设。
                    </Typography.Paragraph>
                </div>
                <Form.Item label="预设名称" required>
                    <Input
                        placeholder="请输入预设名称"
                        value={presetName}
                        onChange={(e) => setPresetName(e.target.value)}
                        autoFocus
                    />
                </Form.Item>
            </Modal>
        </Card>
    );
};

export default SeriesConfig;

